<script setup lang="ts">

import {Key} from "@/pages/keys/data/keys";
import {ConfigProvider, useId} from "reka-ui";
import {ResizableHandle, ResizablePanel, ResizablePanelGroup} from "@/components/ui/resizable";
import KeyApplicationSwitcher from "@/pages/keys/components/KeyApplicationSwitcher.vue";
import KeyNav from "@/pages/keys/components/KeyNav.vue";
import KeyDisplay from "@/pages/keys/components/KeyDisplay.vue";
import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs";
import KeyList from "@/pages/keys/components/KeyList.vue";
import {cn} from "@/lib/utils";
import {computed, h, ref, watchEffect} from "vue";
import {refDebounced, useMediaQuery} from "@vueuse/core";
import {TooltipProvider} from "@/components/ui/tooltip";
import {Separator} from "@/components/ui/separator";
import {Input} from "@/components/ui/input";
import {SearchIcon, ShieldCheckIcon, ShieldIcon} from "lucide-vue-next";
import {Button} from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle
} from "@/components/ui/dialog";
import KeyCreate from "@/pages/keys/components/KeyCreate.vue";
import {Label} from "@/components/ui/label";
import {Textarea} from "@/components/ui/textarea";
import {toast} from "vue-sonner";
import {Form} from "vee-validate";

const useIdFunction = () => useId()

const props = withDefaults(defineProps<KeyProps>(), {
  defaultCollapsed: false,
  defaultLayout: () => [18, 82],
})

interface KeyProps {
  applications: {
    id: string,
    name: string,
    description: string,
    labels: string[],
    icon: string,
  }[],
  keys: Key[],
  defaultLayout?: number[]
  defaultCollapsed?: boolean
  navCollapsedSize: number
}

const isCollapsed = ref(props.defaultCollapsed)
const selectedKey = ref<string | undefined>()
const searchValue = ref('')
const debouncedSearch = refDebounced(searchValue, 250)

const filteredKeyList = computed(() => {
  let output: Key[]
  const searchValue = debouncedSearch.value?.trim()
  if (!searchValue) {
    output = props.keys
  } else {
    output = props.keys.filter((item) => {
      return item.summary.includes(debouncedSearch.value)
    })
  }

  return output
})

const unreadKeyList = computed(() => filteredKeyList.value.filter(item => !item.enabled))

const selectedKeyData = computed(() => props.keys.find(item => item.id === selectedKey.value))


const links: LinkProp[] = [
  {
    title: 'Default',
    label: '11',
    icon: ShieldIcon,
    variant: 'default',
  }
]

const links2: LinkProp[] = [

  {
    title: 'Updates',
    label: '23',
    icon: ShieldCheckIcon,
    variant: 'ghost',
  }
]

function onCollapse() {
  isCollapsed.value = true
}

function onExpand() {
  isCollapsed.value = false
}

const defaultCollapse = useMediaQuery('(max-width: 768px)')

watchEffect(() => {
  isCollapsed.value = defaultCollapse.value
})

const showCreateAccessKey = ref(false)

</script>

<template>

  <ConfigProvider :use-id="useIdFunction">
    <TooltipProvider :delay-duration="0">
      <ResizablePanelGroup
          id="resize-panel-group-1"
          direction="horizontal"
          class="h-full max-h-[calc(100dvh-53px-3rem)] items-stretch"
      >
        <ResizablePanel
            id="resize-panel-1"
            :default-size="defaultLayout[0]"
            :collapsed-size="navCollapsedSize"
            collapsible
            :min-size="15"
            :max-size="20"
            :class="cn(isCollapsed && 'min-w-[50px] transition-all duration-300 ease-in-out')"
            @expand="onExpand"
            @collapse="onCollapse"
        >
          <div :class="cn('flex h-[54px] items-center justify-center', isCollapsed ? 'h-[54px]' : 'px-2')">
            <KeyApplicationSwitcher :is-collapsed="isCollapsed" :applications="applications"/>
          </div>
          <Separator/>
          <KeyNav
              :is-collapsed="isCollapsed"
              :links="links"
          />
          <Separator/>
          <KeyNav
              :is-collapsed="isCollapsed"
              :links="links2"
          />
        </ResizablePanel>
        <ResizableHandle id="resize-handle-1" with-handle/>
        <ResizablePanel id="resize-panel-2" :default-size="defaultLayout[1]" :min-size="30">
          <KeyDisplay v-if="selectedKeyData" :keyDetail="selectedKeyData" @close="selectedKey = ''"/>
          <Tabs v-else default-value="all">
            <div class="flex items-center px-4 py-2">
              <h1 class="text-xl font-bold">
                Keys
              </h1>
              <TabsList class="ml-auto">
                <TabsTrigger value="all" class="text-zinc-600 dark:text-zinc-200">
                  All keys
                </TabsTrigger>
                <TabsTrigger value="unread" class="text-zinc-600 dark:text-zinc-200">
                  Disabled
                </TabsTrigger>
              </TabsList>
            </div>
            <Separator/>
            <div class="bg-background/95 p-4 backdrop-blur supports-[backdrop-filter]:bg-background/60">
              <div class="flex flex-1 space-x-4">
                <Button @click="showCreateAccessKey = true">
                  Create AccessKey
                </Button>
                <div class="relative w-full">
                  <Component :is="SearchIcon" class="absolute left-2 top-2.5 size-4 text-muted-foreground"/>
                  <Input v-model="searchValue" placeholder="Search" class="pl-8"/>
                </div>
              </div>
            </div>
            <TabsContent value="all" class="m-0">
              <KeyList v-model:selected-key="selectedKey" :items="filteredKeyList"/>
            </TabsContent>
            <TabsContent value="unread" class="m-0">
              <KeyList v-model:selected-key="selectedKey" :items="unreadKeyList"/>
            </TabsContent>
          </Tabs>
        </ResizablePanel>
      </ResizablePanelGroup>
    </TooltipProvider>
  </ConfigProvider>

  <Dialog v-model:open="showCreateAccessKey">
    <DialogContent>
      <DialogHeader>
        <DialogTitle>Create AccessKey</DialogTitle>
        <DialogDescription class="text-xs text-muted-foreground">
          Create a new access key to access your application.
        </DialogDescription>
      </DialogHeader>

      <KeyCreate/>
    </DialogContent>
  </Dialog>

</template>

<style scoped>

</style>
